<template>
	<view class="wrap">
	  <u-button @click="clear">清空列表</u-button>
	  <u-waterfall v-model="flowList" ref="uWaterfallRef">
		<!-- 左侧瀑布流 -->
		<template v-slot:left="{ leftList }">
		  <view
			class="demo-warter"
			v-for="(item, index) in leftList"
			:key="item.id"
		  >
			<u-lazy-load
			  threshold="-450"
			  border-radius="10"
			  :image="item.image"
			  :index="index"
			></u-lazy-load>
			<view class="demo-title">{{ item.title }}</view>
			<u-icon
			  name="close-circle-fill"
			  color="#fa3534"
			  size="34"
			  class="u-close"
			  @click="remove(item.id)"
			></u-icon>
		  </view>
		</template>
		<!-- 右侧瀑布流 -->
		<template v-slot:right="{ rightList }">
		  <view
			class="demo-warter"
			v-for="(item, index) in rightList"
			:key="item.id"
		  >
			<u-lazy-load
			  threshold="-450"
			  border-radius="10"
			  :image="item.image"
			  :index="index"
			></u-lazy-load>
			<view class="demo-title">{{ item.title }}</view>
			<u-icon
			  name="close-circle-fill"
			  color="#fa3534"
			  size="34"
			  class="u-close"
			  @click="remove(item.id)"
			></u-icon>
		  </view>
		</template>
	  </u-waterfall>
	  <u-loadmore
		bg-color="rgb(240, 240, 240)"
		:status="loadStatus"
		@loadmore="addRandomData"
	  ></u-loadmore>
	</view>
  </template>
  
<script lang="ts" setup>
import { ref, watch, onMounted,reactive } from "vue";

  // 定义响应式数据
  const loadStatus = ref("loadmore"); // 加载状态
  const flowList = reactive([]); // 瀑布流数据,reactive深度监听响应式数据
  const uWaterfallRef = ref()
  const props = withDefaults(
  defineProps<{
    list: Array<any> // 定义一个接收父组件传递的 list
  }>(),
  {
    list: [] // 设置默认值为空数组
  }
)

  // 添加瀑布数据
  const addRandomData = () => {
	loadStatus.value = 'loading...'
	setTimeout(()=>{
		for (let i = 0; i < 5; i++) {
	  	const item = JSON.parse(JSON.stringify(props.list[i])); // 防止引用问题
	 	 flowList.push(item)
	}
	loadStatus.value = 'loadmore'
	},1000)
  };
  
  // 清空列表
  const clear = () => {
	if (uWaterfallRef.value) {
		uWaterfallRef.value.clear();
	}
  };
  
  // 移除列表项
  const remove = (id) => {
	if (uWaterfallRef.value) {
		uWaterfallRef.value.remove(id);
	}
  };

  watch(
  () => props.list,
  (newList) => {
    if (newList.length > 0) {
		addRandomData()
		console.log(flowList) 
	 
    }
  },
  { immediate: true } // 立即执行一次
)
  
  // 页面加载时模拟数据
  onMounted(() => {
	// console.log(flowList.value)
	// addRandomData();
  });
  </script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>